<template>
  <!-- 搜索工作栏 -->
  <ContentWrap>
    <el-form
      
      :model="queryParams"
      ref="queryFormRef"
      :inline="true"
      label-width="120px"
    >
      <template v-for="(item, index) in visibleSearchConfig" :key="index">
        <el-form-item :prop="item.prop">
          <component
            :is="
              item.type === 'dateRange'
                ? 'el-date-picker'
                : item.type === 'select'
                ? 'el-select'
                : 'el-input'
            "
            v-model="queryParams[item.prop]"
            :placeholder="item.placeholder"
            :start-placeholder="item.startPlaceholder"
            :end-placeholder="item.endPlaceholder"
            :type="item.type === 'dateRange' ? 'daterange' : 'text'"
            :value-format="item.type === 'dateRange' ? 'YYYY-MM-DD HH:mm:ss' : undefined"
            :default-time="
              item.type === 'dateRange'
                ? [new Date('1 00:00:00'), new Date('1 23:59:59')]
                : undefined
            "
            clearable
            @keyup.enter="handleQuery"
            class="!w-240px"
          >
            <template v-if="item.type === 'select'">
              <el-option
                v-for="opt in item.options"
                :key="opt.value"
                :label="opt.label"
                :value="opt.value"
              />
            </template>
          </component>
        </el-form-item>
      </template>

      <el-form-item>
        <el-button @click="handleQuery"> <Icon icon="ep:search" class="mr-5px" /> 搜索 </el-button>
        <el-button @click="resetQuery"> <Icon icon="ep:refresh" class="mr-5px" /> 重置 </el-button>
      </el-form-item>
      <div class="flex justify-center w-full">
        <el-button type="text" @click="toggleExpand" class="expand-toggle-button">
          {{ isExpanded ? '收起' : '展开' }}
          <Icon :icon="isExpanded ? 'ep:arrow-up' : 'ep:arrow-down'" class="ml-5px" />
        </el-button>
      </div>
    </el-form>
  </ContentWrap>
  <!-- 列表 -->
  <ContentWrap>
    <el-row :gutter="10" style="margin-bottom: 16px">
      <el-col :span="12">
        <div style="text-align: left">
          <el-button
            type="primary"
            
            @click="btnAdd"
            :loading="exportLoading"
            v-hasPermi="['system:tenant:export']"
          >
            新增
          </el-button>
        </div>
      </el-col>
      <el-col :span="12">
        <div style="text-align: right">
          <el-button type="default" plain @click="btnLie">
            <img key="1" alt="" width="25px" height="20px" src="@/assets/svgs/column.svg" />
            列表字段
          </el-button>
        </div>
      </el-col>
    </el-row>
    <el-table
      v-loading="loading"
      :data="dataList"
      border
      show-summary
      :summary-method="getSummaries"
      :summary-props="{ columns: ['quantity', 'unitPriceExcludingTax', 'unitPriceIncludingTax'] }"
      style="width: 100%"
    >
      
      <el-table-column label="产品编号" align="center" prop="id" min-width="120" />
      <el-table-column label="产品名称" align="center" prop="name" min-width="120" />
      <el-table-column label="产品条码" align="status" prop="barCode" min-width="100" />
      <el-table-column label="产品分类编号" align="status" prop="categoryId" min-width="100" />
      <el-table-column label="单位编号" align="status" prop="unitId" min-width="100" />
      <el-table-column label="产品状态" align="status" prop="status" min-width="100" />
      <el-table-column label="产品规格" align="status" prop="standard" min-width="100" />
      <el-table-column label="产品备注" align="status" prop="remark" min-width="100" />
      <el-table-column label="保质期天数" align="status" prop="expiryDay" min-width="100" />
      <el-table-column label="基础重量(kg)" align="status" prop="weight" min-width="100" />
      <el-table-column label="采购价格(元)" align="status" prop="purchasePrice" min-width="100" />
      <el-table-column label="销售价格(元)" align="status" prop="minPrice" min-width="100" />
      <el-table-column label="最低价格(元)" align="status" prop="contact" min-width="100" />
      <el-table-column label="库位" align="status" prop="warehouseLocationId" min-width="100" />
      <el-table-column label="仓库区域" align="status" prop="warehouseAreaId" min-width="100" />
    </el-table>
    <!-- 分页 -->
    <Pagination
      :total="total"
      v-model:page="queryParams.pageNo"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />
  </ContentWrap>

  <!-- 自定义字段 -->
  <el-dialog v-model="dialogVisible" title="自定义字段" width="50%" :before-close="handleClose">
    <div class="content">
      <div class="content-list"
        ><el-checkbox v-model="tempVisibleColumns.image" label="图片" size="large"
      /></div>
      <div class="content-list"
        ><el-checkbox v-model="tempVisibleColumns.bianhao" label="产品编号" size="large"
      /></div>
      <div class="content-list"
        ><el-checkbox v-model="tempVisibleColumns.name" label="产品名称" size="large"
      /></div>
      <div class="content-list"
        ><el-checkbox v-model="tempVisibleColumns.count" label="产品分类" size="large"
      /></div>
      <div class="content-list"
        ><el-checkbox v-model="tempVisibleColumns.feilei" label="产品规格" size="large"
      /></div>
      <div class="content-list"
        ><el-checkbox v-model="tempVisibleColumns.shuxing" label="产品属性" size="large"
      /></div>
      <div class="content-list"
        ><el-checkbox v-model="tempVisibleColumns.beizhu" label="产品备注" size="large"
      /></div>
      <div class="content-list"
        ><el-checkbox v-model="tempVisibleColumns.zhuangtai" label="产品使用状态" size="large"
      /></div>
      <div class="content-list"
        ><el-checkbox v-model="tempVisibleColumns.danwei" label="单位(基本单位)" size="large"
      /></div>
      <div class="content-list"
        ><el-checkbox v-model="tempVisibleColumns.beizhu2" label="入库备注" size="large"
      /></div>
      <div class="content-list"
        ><el-checkbox v-model="tempVisibleColumns.danwei2" label="销售单价(基本单位)" size="large"
      /></div>
      <div class="content-list"
        ><el-checkbox v-model="tempVisibleColumns.danwei3" label="成本单价(基本单位)" size="large"
      /></div>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleCancel">取消</el-button>
        <el-button type="primary" @click="handleConfirm"> 确定 </el-button>
      </span>
    </template>
  </el-dialog>

  
   <!-- 新增弹框 -->
  <docking v-model="dockShow" @confirm="btnconfirm" />
</template>
<script lang="ts" setup>
import docking from './components/add.vue'
import {productApi} from '@/api/erp/foundation/product'
import { h } from 'vue'
import { DICT_TYPE, getIntDictOptions, getStrDictOptions } from '@/utils/dict'
import { dateFormatter } from '@/utils/formatTime'
import * as RefundApi from '@/api/pay/refund'
import * as AppApi from '@/api/pay/app'
import download from '@/utils/download'
import type { TableColumnCtx } from 'element-plus'
import type { VNode } from 'vue'
const dockShow =ref(false)
const list = ref([]) // 列表的数据
const message = useMessage() // 消息弹窗

const loading = ref(false) // 列表遮罩层
const total = ref(0) // 列表的总页数
const isExpanded = ref(false)
// 切换展开状态
const toggleExpand = () => {
  isExpanded.value = !isExpanded.value
}
const visibleColumns = ref({
  image: true,
  bianhao: true,
  name: true,
  count: true,
  feilei: true,
  shuxing: true,
  beizhu: true,
  zhuangtai: true,
  danwei: true,
  beizhu2: true,
  danwei2: true,
  danwei3: true
})
const dialogVisible = ref(false)
const tempVisibleColumns = ref({ ...visibleColumns.value })
const searchConfig = ref([
  {
    prop: 'shipmentNumber',
    placeholder: '请输入入库编号',
    type: 'input',
    showInCollapsed: true
  },
  {
    prop: 'materialKey',
    placeholder: '请选择单据类型',
    type: 'select',
    showInCollapsed: true
  },
  {
    prop: 'model',
    placeholder: '请输入物料名称/编号',
    type: 'input',
    showInCollapsed: true
  },
  {
    prop: 'model',
    placeholder: '请输入规格',
    type: 'input',
    showInCollapsed: true
  },
  {
    prop: 'model',
    placeholder: '请输入型号',
    type: 'input',
    showInCollapsed: true
  },
  {
    prop: 'model',
    placeholder: '请输入关联单号',
    type: 'input',
    showInCollapsed: false
  },
  {
    prop: 'model',
    placeholder: '请输入建议供应商',
    type: 'input',
    showInCollapsed: false
  },
  {
    prop: 'model',
    placeholder: '请输入仓库',
    type: 'input',
    showInCollapsed: false
  },
  {
    prop: 'model',
    placeholder: '请输入库区',
    type: 'input',
    showInCollapsed: false
  },
  {
    prop: 'model',
    placeholder: '请输入库位',
    type: 'input',
    showInCollapsed: false
  },
  {
    prop: 'model',
    placeholder: '请输入销售订单编号',
    type: 'input',
    showInCollapsed: false
  },
  {
    prop: 'model',
    placeholder: '请输入客户订单编号',
    type: 'input',
    showInCollapsed: false
  },
  {
    prop: 'createTime',
    type: 'dateRange',
    startPlaceholder: '制单开始日期',
    endPlaceholder: '制单结束日期',
    showInCollapsed: false
  }
])
const dataList=ref([])
const name=ref("")
const pageNo=ref(1)
const pageSize=ref(10)
const telephone =ref("")
const mobile=ref("")
/** 初始化 **/
onMounted(async () => {
  getpageList()
})
//新增刷新列表
function btnconfirm(){
  getpageList()
}
//列表接口
function getpageList(){
  let parm={
    name:name.value,
    pageNo:pageNo.value,
    pageSize:pageSize.value,
    telephone:telephone.value,
    mobile:mobile.value
  }
  productUnitApi.pageList(parm).then((res)=>{
    console.log('列表的数据',res)
      dataList.value=res.list
      
  })
}
//打开新增弹框
function btnAdd(){
  dockShow.value=true
}
const btnLie = () => {
  tempVisibleColumns.value = { ...visibleColumns.value }
  dialogVisible.value = true
}

// 根据展开状态过滤显示的搜索项
const visibleSearchConfig = computed(() => {
  return searchConfig.value.filter((item) => isExpanded.value || item.showInCollapsed)
})
const queryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  merchantId: undefined,
  appId: undefined,
  channelCode: undefined,
  merchantOrderId: undefined,
  merchantRefundId: undefined,
  status: undefined,
  payPrice: undefined,
  refundPrice: undefined,
  channelOrderNo: undefined,
  channelRefundNo: undefined,
  createTime: [],
  successTime: []
})
const queryFormRef = ref() // 搜索的表单
const exportLoading = ref(false) // 导出等待
const appList = ref([]) // 支付应用列表集合

interface Product {
  quantity: number
  excludeTaxAmount: number
  includeTaxAmount: number
}
interface SummaryMethodProps<T = Product> {
  columns: TableColumnCtx<T>[]
  data: T[]
}

const getSummaries = (param: SummaryMethodProps) => {
  const { columns, data } = param
  const sums: (string | VNode)[] = []
  columns.forEach((column, index) => {
    if (index === 0) {
      sums[index] = h('div', { style: { textDecoration: 'none' } }, ['合计'])
      return
    }
    const values = data.map((item) => Number(item[column.property]))
    if (!values.every((value) => Number.isNaN(value))) {
      sums[index] = ` ${values.reduce((prev, curr) => {
        const value = Number(curr)
        if (!Number.isNaN(value)) {
          return prev + curr
        } else {
          return prev
        }
      }, 0)}`
    } else {
      sums[index] = ''
    }
  })

  return sums
}

/** 搜索按钮操作 */
const handleQuery = () => {
  queryParams.pageNo = 1
  getList()
}

/** 查询列表 */
const getList = async () => {
  loading.value = true
  try {
    const data = await RefundApi.getRefundPage(queryParams)
    list.value = data.list
    total.value = data.total
  } finally {
    loading.value = false
  }
}

/** 重置按钮操作 */
const resetQuery = () => {
  queryFormRef.value?.resetFields()
  handleQuery()
}



/** 预览详情 */
const detailRef = ref()
const openDetail = (id: number) => {
  detailRef.value.open(id)
}


</script>
<style scoped>
:deep(.el-table__footer-wrapper tfoot td) {
  background-color: #fff3e0;
}

.expand-toggle-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  font-size: 12px;
  color: #909399;
}

/* 使表单行间距更合理 */
.el-form-item {
  margin-bottom: 10px;
}

.order-font {
  padding: 2px 0;
  font-size: 12px;
}
</style>
